﻿let tabs = document.getElementsByClassName('tab-item ');
var AvgData = [];
var myChart;
var option;
window.onload = function () {
    for (let i = 0; i < tabs.length; i++) {
        tabs[i].index = i;
        tabs[i].onclick = function () {
            for (let j = 0; j < tabs.length; j++) {
                tabs[j].classList.remove("active");
            }
            //this.classList.add('active');
            showTabModal();
            // 根据type查询数据(0:开机设备，1: 关机设备；2: 故障设备， 3:超标设备)
            getTabsData(i);
        }
    };
    tabs[2].onclick = null;
    tabs[3].onclick = null;
    let CurrentTabs = GetQueryString("SearchType");
    switch (CurrentTabs) {
        case null:  //显示在线设备

            break;
        case "OffLine":
            for (let j = 0; j < tabs.length; j++) {
                tabs[j].classList.remove("active");
            }
            tabs[1].classList.add('active');
            break;
        default:
    }


    // 初始化图表
    initChat();

    // 百度地图
    initMap();
    hideTabModal();
}

//获取QueryString
function GetQueryString(name) {
    var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
    var r = window.location.search.substr(1).match(reg);
    if (r != null) return unescape(r[2]); return null;
}
// 切换tab页打开遮罩
function showTabModal() {
    console.log(111);
    let tabModal = document.getElementById('tabModal2');
    tabModal.classList.add('hidden_modal');
}
//关闭点击tab出现的遮罩层
function hideTabModal() {
    let tabModal = document.getElementById('tabModal2');
    tabModal.classList.remove('hidden_modal');
}



// 获取到对应tab页的数据
function getTabsData(type) {
    console.log(type);
    switch (type) {
        case 0:
            window.location.href = "/DataView/MapDetail";
            break;
        case 1:
            window.location.href = "/DataView/MapDetail?SearchType=OffLine";
            break;
        default:
    }
    //获取到数据以后关闭tab的遮罩层
    setTimeout(
        hideTabModal.bind(this), 2000
    )
    //hideTabModal();
}

// 初始化图表
function initChat() {
    myChart = echarts.init(document.getElementById('main'));
    option = {
        title: {
            text: "最近24小时平均值",
            textStyle: {//标题内容的样式
                fontStyle: 'normal',//主标题文字字体风格，默认normal，有italic(斜体),oblique(斜体)
                fontWeight: "normal",//可选normal(正常)，bold(加粗)，bolder(加粗)，lighter(变细)，100|200|300|400|500...
                fontFamily: "san-serif",//主题文字字体，默认微软雅黑
                fontSize: 18,//主题文字字体大小，默认为18px
            },
            left: 'center',
            top: '20px',
        },
        legend: {
            bottom: 0,
            orient: 'horizontal'
        },
        tooltip: {},
        dataset: {
            dimensions: ['product', '油烟浓度', 'VOC', '颗粒物'],
            source: AvgData,
            //source: [
            //    { product: '0', '油烟浓度': 0.5, '颗粒物浓度': 1, '非甲烷': 0.75 },
            //    { product: '1', '油烟浓度': 1, '颗粒物浓度': 0.5, '非甲烷': 0.75 },
            //    { product: '2', '油烟浓度': 0.75, '颗粒物浓度': 1, '非甲烷': 0.5 },
            //    { product: '3', '油烟浓度': 0.5, '颗粒物浓度': 1, '非甲烷': 0.75 },
            //    { product: '4', '油烟浓度': 1, '颗粒物浓度': 0.5, '非甲烷': 0.75 },
            //    { product: '5', '油烟浓度': 0.75, '颗粒物浓度': 1, '非甲烷': 0.5 },
            //    { product: '6', '油烟浓度': 0.5, '颗粒物浓度': 1, '非甲烷': 0.75 },
            //    { product: '7', '油烟浓度': 1, '颗粒物浓度': 0.5, '非甲烷': 0.75 },
            //    { product: '8', '油烟浓度': 0.75, '颗粒物浓度': 1, '非甲烷': 0.5 },
            //    { product: '9', '油烟浓度': 0.5, '颗粒物浓度': 1, '非甲烷': 0.75 },
            //    { product: '10', '油烟浓度': 1, '颗粒物浓度': 0.5, '非甲烷': 0.75 },
            //    { product: '11', '油烟浓度': 0.75, '颗粒物浓度': 1, '非甲烷': 0.5 },
            //    { product: '12', '油烟浓度': 0.5, '颗粒物浓度': 1, '非甲烷': 0.75 },
            //    { product: '13', '油烟浓度': 1, '颗粒物浓度': 0.5, '非甲烷': 0.75 },
            //    { product: '14', '油烟浓度': 0.75, '颗粒物浓度': 1, '非甲烷': 0.5 },
            //    { product: '15', '油烟浓度': 0.5, '颗粒物浓度': 1, '非甲烷': 0.75 },
            //    { product: '16', '油烟浓度': 1, '颗粒物浓度': 0.5, '非甲烷': 0.75 },
            //    { product: '17', '油烟浓度': 0.75, '颗粒物浓度': 1, '非甲烷': 0.5 },
            //    { product: '18', '油烟浓度': 0.5, '颗粒物浓度': 1, '非甲烷': 0.75 },
            //    { product: '19', '油烟浓度': 1, '颗粒物浓度': 0.5, '非甲烷': 0.75 },
            //    { product: '20', '油烟浓度': 0.75, '颗粒物浓度': 1, '非甲烷': 0.5 },
            //    { product: '21', '油烟浓度': 0.5, '颗粒物浓度': 1, '非甲烷': 0.75 },
            //    { product: '22', '油烟浓度': 1, '颗粒物浓度': 0.5, '非甲烷': 0.75 },
            //    { product: '23', '油烟浓度': 0.75, '颗粒物浓度': 1, '非甲烷': 0.5 },
            //    { product: '24', '油烟浓度': 0.75, '颗粒物浓度': 1, '非甲烷': 0.5 },
            //]
        },
        xAxis: { type: 'category' },
        yAxis: {},
        // Declare several bar series, each will be mapped
        // to a column of dataset.source by default.
        series: [
            { type: 'bar' },
            { type: 'bar' },
            { type: 'bar' }
        ]
    };
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
    
}

// 初始化地图
function initMap(){
    // 百度地图API功能
    let map = new BMap.Map("mapDetail");

    let point = new BMap.Point(106.302201, 29.403473);
    map.centerAndZoom(point, 11);
    map.enableScrollWheelZoom();
    map.setMapStyleV2({
        styleId: '116436b35bdb4c1508eea8a5552d0ae2'
    });


    for (var i = 0; i < DeviceListJson.length; i++) {
        DeviceListArray.push(DeviceListJson[i].DeviceId);
        //这里需要查找其他相似的数组
        for (var j = i + 1; j < DeviceListJson.length; j++) {
            if (DeviceListJson[j].lon == DeviceListJson[i].lon && DeviceListJson[j].lat == DeviceListJson[i].lat) {
                //表明找到相等的,把这个弄进来
                DeviceListArray.push(DeviceListJson[j].DeviceId);
                //然后需要在原数组内删除掉弄进来的这个元素
                DeviceListJson.splice(j, 1);
            }
        }

        point = new BMap.Point(DeviceListJson[i].lon, DeviceListJson[i].lat);
        var marker = new BMap.Marker(point);  // 创建标注
        var label = new BMap.Label(DeviceListArray.length + "台设备", { offset: new BMap.Size(-10, -20) });
        marker.setLabel(label);
        marker.MN = DeviceListJson[i].MN;   //DeviceListJson[i].DeviceId;
        marker.Name = DeviceListJson[i].Name;
        marker.Y1 = DeviceListJson[i].Y1;
        marker.V1 = DeviceListJson[i].V1;
        marker.K1 = DeviceListJson[i].K1;
        map.addOverlay(marker);              // 将标注添加到地图中
        marker.addEventListener("click", function () {
            getDetail(this.MN, this.Name, this.Y1, this.V1, this.K1);
        });
        DeviceListArray = [];
    }


}

function getDetail(MN, Name, Y1, V1, K1) {
    $("#TabDevName").text(Name);
    $("#TabY1").text(Y1 + "mg/m³");
    $("#TabV1").text(V1 + "mg/m³");
    $("#TabK1").text(K1 + "mg/m³");
    $(".mask_contents").attr("href", "/DataView/ShopDetail?MN=" + MN);
    $.ajaxSettings.async = false;
    $.post("/DataView/GetSingleAvg", { "MN": MN }, function (msg) {

        console.log(msg);
        //首先格式化归零数据
        for (var i = 0; i < msg.length; i++) {
            if (msg[i].Y1 == null || msg[i].V1 == null || msg[i].K1 == null) {
                msg[i].Y1 = 0;
                msg[i].V1 = 0;
                msg[i].K1 = 0;
            }
        };
        AvgData = [];
        for (var i = 0; i < msg.length; i++) {
            var tempItem = { product: msg[i].DateHour, '油烟浓度': msg[i].Y1, 'VOC': msg[i].V1, '颗粒物': msg[i].K1 };
            AvgData.push(tempItem);
        }

    });
    $.ajaxSettings.async = true;
    //var option = myChart.getOption();
    option.dataset.source = AvgData;
    myChart.setOption(option);




}


// 退出登录
function dropOut() {
    window.location.href = "/DataView/LogOut";
}

